<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="generator" content="emlog">
<title>Home-CourageAQ</title>
<link rel="stylesheet" href="/jsp/css/font_228781_so3n7xpiffajor.css" />
<link rel="stylesheet" href="/jsp/css/style.css" />
<link rel="stylesheet" href="/jsp/css/swiper.css" />
<link rel="stylesheet" href="/jsp/css/scroll-styles.css">
<script type="text/javascript" src="/jsp/js/jquery-2.2.2.min.js" ></script>
<script type="text/javascript" src="/jsp/js/common_tpl.js" ></script>
<script type="text/javascript" src="/jsp/js/banner.js"></script>
<script  type="text/javascript" src="/jsp/js/dateformat.js"></script>
<script  type="text/javascript" src="/jsp/js/jqPaginator.js"></script>
</head>
<style>
	.log_list_item{
		min-height: 35px;
	}
	.log_list_item .pic-link{
		width: 120px;
	}
	.ar_type{
		top: 23px;
	}
	@media all and (max-width: 960px) {
		.log_list_item{
			min-height: 35px;
		}
		.log_list_item .pic-link{
			height: 40px;
		}
		.ar_type{
			padding-left: 130px;
		}
		.log_list_item .pic-link{
			position: absolute;
		}
	}
</style>
<body>
<!--导航-->
<div class="nav">
    <div class="container">
        <a href="javascript:;" class="icon-menu" id="open-menu">
            <i class="icon-menu-item"></i>
            <i class="icon-menu-item"></i>
            <i class="icon-menu-item"></i>
        </a>
        <div class="logo">
            <a href="/index.html">
                <img src="/jsp/images/logo.png"  style="float: left;height: 70px;" />
            </a>
        </div>
        <ul class="menu" id="menu">
            <li class="menu-item">
                <a href="/index.html">首页</a>
            </li>
            <li class="menu-item">
                <a href="/main/lately.html">最近更新</a>
            </li>
            <li class="menu-item">
                <a href="/main/blog.html">博客文章</a>
            </li>
            <li class="menu-item  active" >
                <a href="/main/type.html">博客分类</a>
            </li>
            <li class="menu-item">
                <a href="#">音乐</a>
            </li>
            <li class="menu-item">
                <a href="/message/list.html">留言</a>
            </li>
        </ul>
    </div>
</div>
<!--导航 ／-->
<!-- 主要内容 start -->
<div class="main container">
    <div class="content-wrap">
        <div class="content" id="content">
            <!--轮播图-->
            <!--全屏滚动-->
            <div class="banner">
                <div class="b-img">
                    <a href="#" style="background:url(/jsp/images/banner0.jpg) center no-repeat;"></a>
                    <a href="#" style="background:url(/jsp/images/banner1.jpg) center no-repeat;"></a>
                    <a href="#" style="background:url(/jsp/images/banner2.jpg) center no-repeat;"></a>
                </div>
                <div class="b-list"></div>
                <a class="bar-left" href="#"><em></em></a><a class="bar-right" href="#"><em></em></a> </div>
            <!--end 全屏滚动-->
            
            <!-- 内容 -->
            <ul class="log_list" style="min-height: 400px;">
	            <c:forEach var="t" items="${article }">
		            	<li class="log_list_item">
		            		<a href="/right/viewtype.html?id=${t.id }" class="pic-link">
		            			<img  width="150px" height="40px" alt="" src="${t.image_url }">
	            			</a>
	            			<a href="/right/viewtype.html?id=${t.id }" >
	            				<div class="ar_type"><font size="5">${t.typename } (${t.num })</font></div>
	            			</a>
		            	</li>
	            	
	            </c:forEach>
				<!-- <li class="log_list_item">
					<a href="/main/index/detail?id='+ n.id+'" class="pic-link">
						<img width="150px" height="40px" src="/jsp/images/linux.png">
					</a>
					
				</li> -->
            </ul>
            <!--分页-->
            <div id="page" class="pagination" style="float: right;"></div>
            <!--分页 ／-->
        </div>
    </div>
    <!-- 右侧-->
    <div class="sidebar" id="sidebar">
        <div class="widget widget-user" style="height: 293px">
            <h3>个人资料</h3>
            <%@ include file="personal-info.jsp" %>
        </div>
        <div class="widget widget-search">
            <h3>搜索</h3>
            <ul id="logsearch">
                <form  onsubmit="return false;" method="get" action="" id="search-form1">
                    <input name="keyword" id="keyword1" class="input" style="width: 100%;box-sizing: border-box;border: 1px solid #eee;" placeholder="search.." type="text">
                </form>
            </ul>
        </div>

        <div class="widget widget-sorts">
            <h3>分类</h3>
            <ul id="blogsort">
            </ul>
        </div>
        <div class="widget widget-archive">
            <h3>存档</h3>
            <ul id="record">
            </ul>
        </div>
        <div class="widget widget-newlog">
            <h3>最新文章</h3>
            <ul id="newlog">
            </ul>
        </div>
        <div class="widget widget-random-log">
            <h3>随机文章</h3>
            <ul id="randlog">
            </ul>
        </div>
    </div><!--end #siderbar-->
    <div class="clearfix"></div>
</div>

<!--footer-->
<%@ include file="footer.jsp" %>
<!--网站小工具-->
<div class="site-tools">
    <div class="item active gotoup" id="gotoup"><i class="iconfont icon-up"></i></div>
</div>
<!--网站小工具 ／-->
<script src="/jsp/js/main.min.js"></script>
</body>
<script type="text/javascript">
$(document).ready(function(){
	
	//右侧博客分类
	$.get("/right/type.action",function(data){
		var html = '';
		$.each(data,function(m,n){
			html+='<li>';
			html+='<a href="/right/viewtype.html?id='+ n.id +'">' + n.typename+'(' + n.num + ')</a>';
			html+='</li>';
		});
		$("#blogsort").html(html);
	});
	//右侧时间分类
	$.get("/right/time.action",function(data){
		var html = '';
		$.each(data,function(m,n){
			html+='<li>';
			html+='<a href="/right/viewtime.html?article_time='+ n.article_time +'">'+ n.article_time.replace("-","年") +'月('+ n.clicknum +')</a>';
			html+='</li>';
		});
		$("#record").html(html);
	});
	//右侧时间top5
	$.get("/right/top5.action",function(data){
		var html= '';
		$.each(data,function(m,n){
			html+='<li>';
			html+='<a href="/main/index/detail?id='+ n.id+'">'+ n.title+'</a>';
			html+='</li>';
		})
		$("#newlog").html(html);
	});
	//右侧随机5条记录
	$.get("/right/rand5.action",function(data){
		var html = '';
		$.each(data,function(m,n){
			html+='<li>';
			html+='<a href="/main/index/detail?id='+ n.id+'">'+ n.title +'</a>';
			html+='</li>'
		});
		$("#randlog").html(html);
	});
	//顶部点击
	$("#search-form").click(function(){
		$("#keyword1").val("");
	});
	$("#search-form1").click(function(){
		$("#keyword").val("");
	});
	
	//顶部搜索
	$("#search-form").bind('keyup', function(event) {
		if (event.keyCode == "13") {
			var keyword = $("#keyword").val();
			search(keyword);
		}
	});
	//右侧搜索
	$("#search-form1").bind('keyup', function(event) {
		if (event.keyCode == "13") {
			var keyword = $("#keyword1").val();
			search(keyword);
		}
	});
	
	function search(keyword){
		$.get("/search/article.action?keyword=" + keyword,function(data){
			var totalPages1 = data.pageCount.totalPages;
			var pageNum1 = data.pageCount.pageNum;
			if(totalPages1 != 0){
				//总页数
				$('#page').jqPaginator({
				    totalPages: parseInt(totalPages1),
				    visiblePages: 5,
				    currentPage: parseInt(pageNum1),
				    first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
				    prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
				    next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
				    last: '<li class="last"><a href="javascript:void(0);">尾页</a></li>',
				    page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
				    onPageChange: function (num) {
				    	$.get("/search/article.action?keyword="+ keyword +"&page=" + num,function(data){
				    		var html = "";
				    		$.each(data.pager.item,function(m,n){
				    			html+='<li class="log_list_item">';
				    			html+='<div class="tag"><a href="#">'+ n.type +'</a></div>';
				    			html+='<a href="/main/index/detail?id='+ n.id+'" class="pic-link">';
				    			html+='<img src="'+n.image_url+'">';
				    			html+='</a>';
				    			html+='<h2 class="title">';
				    			html+='<a href="/main/index/detail?id='+ n.id+'">'+ n.title +'</a>';
				    			html+='<div class="info">';
				    			html+='<i class="iconfont icon-time" ></i>';
				    			html+='<span class="time">'+ formatDateString(n.article_time) +'</span>';
				    			html+='<i class="iconfont icon-view" style="padding: 0 5px"></i>';
				    			html+='<span class="views">'+ n.clicknum +'</span>';
				    			html+='</div>';
				    			html+='<div class="description">'+ n.text +'</div>';
				    			html+='<div class="tags"></div>';
				    			html+='</li>';
				    		});
				    		$(".log_list").html(html);
				    	});
				    }
				});
			}else{
				$('#page').html("")
				$(".log_list").html("");
			}
		});
	}
});
</script>
</html>